<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>作家注册表单</title>
  <style>
    :root {
      --primary-color: #4a6cf7;
      --secondary-color: #f0f2ff;
      --text-color: #333;
      --light-text: #666;
      --border-color: #e0e4f0;
      --success-color: #2ecc71;
      --error-color: #e74c3c;
      --background-color: #f9fafc;
      --container-bg: #ffffff;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    body {
      background-color: var(--background-color);
      color: var(--text-color);
      line-height: 1.6;
      padding: 20px;
    }
    
    .container {
      max-width: 800px;
      margin: 0 auto;
      background-color: var(--container-bg);
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      overflow: hidden;
    }
    
    .form-header {
      background-color: var(--primary-color);
      color: white;
      padding: 30px 25px;
      text-align: center;
    }
    
    .form-header h1 {
      font-size: 28px;
      margin-bottom: 10px;
      font-weight: 600;
    }
    
    .form-header p {
      font-size: 16px;
      opacity: 0.9;
    }
    
    .form-body {
      padding: 30px 25px;
    }
    
    .form-group {
      margin-bottom: 25px;
    }
    
    .form-group label {
      display: block;
      margin-bottom: 8px;
      font-weight: 500;
      color: var(--text-color);
    }
    
    .form-group small {
      display: block;
      margin-top: 5px;
      font-size: 13px;
      color: var(--light-text);
    }
    
    .form-control {
      width: 100%;
      padding: 12px 15px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 16px;
      transition: border-color 0.3s;
    }
    
    .form-control:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.2);
    }
    
    .form-control-textarea {
      min-height: 120px;
      resize: vertical;
    }
    
    .form-control-file {
      padding: 10px 0;
    }
    
    .form-control-file input {
      display: none;
    }
    
    .file-upload-btn {
      display: inline-block;
      padding: 10px 20px;
      background-color: var(--secondary-color);
      color: var(--primary-color);
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 500;
      transition: background-color 0.3s;
    }
    
    .file-upload-btn:hover {
      background-color: #e6e9ff;
    }
    
    .file-preview {
      margin-top: 10px;
      padding: 15px;
      border: 1px dashed var(--border-color);
      border-radius: 8px;
      background-color: var(--secondary-color);
      display: none;
      text-align: center;
    }
    
    .file-preview.active {
      display: block;
    }
    
    .file-preview img {
      max-width: 200px;
      max-height: 300px;
      border-radius: 6px;
      margin-bottom: 10px;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    
    .file-preview .file-info {
      margin-top: 10px;
      font-size: 14px;
      color: var(--text-color);
    }
    
    .radio-group, .checkbox-group {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-top: 10px;
    }
    
    .radio-option, .checkbox-option {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .form-error {
      color: var(--error-color);
      font-size: 13px;
      margin-top: 5px;
      display: none;
    }
    
    .form-error.active {
      display: block;
    }
    
    .form-success {
      color: var(--success-color);
      font-size: 13px;
      margin-top: 5px;
      display: none;
    }
    
    .form-success.active {
      display: block;
    }
    
    .form-footer {
      padding: 20px 25px;
      background-color: var(--secondary-color);
      text-align: center;
    }
    
    .submit-btn {
      padding: 12px 30px;
      background-color: var(--primary-color);
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.3s;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    
    .submit-btn:hover {
      background-color: #3a5ce6;
    }
    
    .submit-btn:disabled {
      background-color: #90a3ff;
      cursor: not-allowed;
    }
    
    .form-section-title {
      font-size: 20px;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 2px solid var(--border-color);
      color: var(--primary-color);
    }
    
    .required-field::after {
      content: " *";
      color: var(--error-color);
    }
    
    /* 密码强度提示样式 */
    .password-strength {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-top: 5px;
      font-size: 12px;
      color: var(--light-text);
    }
    .strength-bar {
      height: 6px;
      background-color: #e0e4f0;
      border-radius: 3px;
      flex-grow: 1;
      overflow: hidden;
    }
    .strength-level {
      height: 100%;
      border-radius: 3px;
    }
    .strength-very-weak { background-color: #e74c3c; }
    .strength-weak { background-color: #f39c12; }
    .strength-medium { background-color: #f1c40f; }
    .strength-strong { background-color: #2ecc71; }
    .password-feedback {
      margin-left: 5px;
      min-width: 80px;
      text-align: left;
    }
    
    @media (max-width: 600px) {
      .form-body, .form-header, .form-footer {
        padding: 20px 15px;
      }
      
      .form-header h1 {
        font-size: 24px;
      }
      
      .file-preview img {
        max-width: 100%;
        max-height: 200px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="form-header">
      <h1>作家注册</h1>
      <p>完成账号注册并填写您的基本信息</p>
    </div>
    
    <div class="form-body">
      <form id="writer-registration-form" action="/qimao/writer/regWriter.do" method="post" enctype="multipart/form-data">
        <h2 class="form-section-title">账号注册信息</h2>
        
        <!-- 账号输入字段 -->
        <div class="form-group">
          <label for="writer-account" class="required-field">账号</label>
          <input type="text" id="writer-account" class="form-control" name="username" placeholder="请设置账号（6-20位字母、数字或下划线）">
          <div class="form-error" id="account-error">请输入账号，6-20位字母、数字或下划线</div>
          <div class="form-success" id="account-success">账号格式正确</div>
        </div>
        
        <!-- 密码输入字段 -->
        <div class="form-group">
          <label for="writer-password" class="required-field">密码</label>
          <input type="password" id="writer-password" class="form-control" name="password" placeholder="请设置密码（至少8位，包含大小写字母和数字）">
          <div class="password-strength">
            <div class="strength-bar">
              <div class="strength-level strength-very-weak" id="strength-bar"></div>
            </div>
            <div class="password-feedback" id="password-feedback">非常弱</div>
          </div>
          <div class="form-error" id="password-error">请输入密码，至少8位，包含大小写字母和数字</div>
          <div class="form-success" id="password-success">密码格式正确</div>
        </div>
        
        <!-- 确认密码输入字段 -->
        <div class="form-group">
          <label for="confirm-password" class="required-field">确认密码</label>
          <input type="password" id="confirm-password" class="form-control" name="password2" placeholder="请再次输入密码">
          <div class="form-error" id="confirm-password-error">两次输入的密码不一致</div>
          <div class="form-success" id="confirm-password-success">密码一致</div>
        </div>
        
        <h2 class="form-section-title">作家信息</h2>
        
        <!-- 新增：头像上传字段 -->
        <div class="form-group">
          <label for="profile-picture">头像上传</label>
          <div class="form-control-file">
            <input type="file" id="profile-picture" name="headImg" accept="image/jpeg,image/png">
            <button type="button" class="file-upload-btn" id="upload-btn">选择头像</button>
            <div class="file-preview" id="profile-preview">
              <img src="" alt="头像预览" id="preview-image">
              <div class="file-info" id="file-info">暂无文件</div>
              <button type="button" class="file-remove-btn" id="remove-btn" style="display: none;">移除头像</button>
            </div>
          </div>
          <small>可选，支持JPG、PNG格式，文件大小不超过5MB</small>
          <div class="form-error" id="profile-error">请上传JPG或PNG格式的图片，大小不超过5MB</div>
          <div class="form-success" id="profile-success">头像格式正确</div>
        </div>
        
        <!-- 性别选择 -->
        <div class="form-group">
          <label for="writer-gender" class="required-field">性别</label>
          <div class="radio-group">
            <div class="radio-option">
              <input type="radio" id="gender-male" name="writer-gender" value="male" checked>
              <label for="gender-male">男</label>
            </div>
            <div class="radio-option">
              <input type="radio" id="gender-female" name="writer-gender" value="female">
              <label for="gender-female">女</label>
            </div>
            <div class="radio-option">
              <input type="radio" id="gender-other" name="writer-gender" value="other">
              <label for="gender-other">其他</label>
            </div>
          </div>
        </div>
        
        <div class="form-group">
          <label for="writer-name" class="required-field">作家名</label>
          <input type="text" id="writer-name" class="form-control" name="penName" placeholder="请输入作家名">
          <div class="form-error" id="writer-name-error">请输入作家名</div>
          <div class="form-success" id="writer-name-success">格式正确</div>
        </div>
        
        <div class="form-group">
          <label for="writer-intro">作家简介</label>
          <textarea id="writer-intro" class="form-control form-control-textarea" name="writerIntro" placeholder="请简要介绍自己的创作经历或风格（可选）"></textarea>
          <small>让读者更好地了解你，字数不限（可选）</small>
        </div>
      </form>
    </div>
    
    <div class="form-footer">
      <button type="submit" form="writer-registration-form" class="submit-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle" viewBox="0 0 16 16">
          <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
          <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.97 9.02a.75.75 0 0 1 1.07-1.05l3.01 3.01 5.4-6.42a.267.267 0 0 1 .02-.02z"/>
        </svg>
        注册账号
      </button>
    </div>
  </div>

  <script>
  document.addEventListener('DOMContentLoaded', function() {
	  const form = document.getElementById('writer-registration-form');
	  
	  // 账号密码相关元素（未修改）
	  const accountInput = document.getElementById('writer-account');
	  const passwordInput = document.getElementById('writer-password');
	  const confirmPasswordInput = document.getElementById('confirm-password');
	  const accountError = document.getElementById('account-error');
	  const accountSuccess = document.getElementById('account-success');
	  const passwordError = document.getElementById('password-error');
	  const passwordSuccess = document.getElementById('password-success');
	  const confirmPasswordError = document.getElementById('confirm-password-error');
	  const confirmPasswordSuccess = document.getElementById('confirm-password-success');
	  const strengthBar = document.getElementById('strength-bar');
	  const passwordFeedback = document.getElementById('password-feedback');
	  
	  // 作家名相关元素（注意penName的引用）
	  const writerNameInput = document.getElementById('writer-name');
	  const writerNameError = document.getElementById('writer-name-error');
	  const writerNameSuccess = document.getElementById('writer-name-success');
	  
	  // 头像上传相关元素（未修改）
	  const profileInput = document.getElementById('profile-picture');
	  const uploadBtn = document.getElementById('upload-btn');
	  const profilePreview = document.getElementById('profile-preview');
	  const previewImage = document.getElementById('preview-image');
	  const fileInfo = document.getElementById('file-info');
	  const removeBtn = document.getElementById('remove-btn');
	  const profileError = document.getElementById('profile-error');
	  const profileSuccess = document.getElementById('profile-success');
	  
	  let uploadedFile = null;
	  
	  // 账号验证（未修改）
	  function validateAccount() {
	    const account = accountInput.value.trim();
	    const accountRegex = /^[a-zA-Z0-9_]{6,20}$/;
	    
	    if (!account) {
	      accountError.classList.add('active');
	      accountSuccess.classList.remove('active');
	      return false;
	    } else if (!accountRegex.test(account)) {
	      accountError.textContent = '账号需6-20位字母、数字或下划线';
	      accountError.classList.add('active');
	      accountSuccess.classList.remove('active');
	      return false;
	    } else {
	      accountError.classList.remove('active');
	      accountSuccess.classList.add('active');
	      return true;
	    }
	  }
	  
	  // 密码强度检测（未修改）
	  function checkPasswordStrength(password) {
	    let strength = 0;
	    
	    // 密码长度
	    if (password.length >= 8) strength += 2;
	    if (password.length >= 12) strength += 2;
	    
	    // 包含小写字母
	    if (/[a-z]/.test(password)) strength += 2;
	    
	    // 包含大写字母
	    if (/[A-Z]/.test(password)) strength += 2;
	    
	    // 包含数字
	    if (/[0-9]/.test(password)) strength += 2;
	    
	    // 包含特殊字符
	    if (/[^a-zA-Z0-9]/.test(password)) strength += 2;
	    
	    // 限制最大强度为10
	    strength = Math.min(strength, 10);
	    
	    // 更新强度条和反馈
	    const percentage = (strength / 10) * 100;
	    strengthBar.style.width = `${percentage}%`;
	    
	    if (strength <= 4) {
	      strengthBar.className = 'strength-level strength-very-weak';
	      passwordFeedback.textContent = '非常弱';
	    } else if (strength <= 6) {
	      strengthBar.className = 'strength-level strength-weak';
	      passwordFeedback.textContent = '弱';
	    } else if (strength <= 8) {
	      strengthBar.className = 'strength-level strength-medium';
	      passwordFeedback.textContent = '中等';
	    } else {
	      strengthBar.className = 'strength-level strength-strong';
	      passwordFeedback.textContent = '强';
	    }
	    
	    return strength >= 6; // 至少需要中等强度
	  }
	  
	  // 密码验证（未修改）
	  function validatePassword() {
	    const password = passwordInput.value.trim();
	    const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,}$/;
	    
	    if (!password) {
	      passwordError.classList.add('active');
	      passwordSuccess.classList.remove('active');
	      return false;
	    } else if (!passwordRegex.test(password)) {
	      passwordError.textContent = '密码需至少8位，包含大小写字母和数字';
	      passwordError.classList.add('active');
	      passwordSuccess.classList.remove('active');
	      return false;
	    } else {
	      const isStrong = checkPasswordStrength(password);
	      if (!isStrong) {
	        passwordError.textContent = '密码强度不足，请使用更强的密码';
	        passwordError.classList.add('active');
	        passwordSuccess.classList.remove('active');
	        return false;
	      } else {
	        passwordError.classList.remove('active');
	        passwordSuccess.classList.add('active');
	        return true;
	      }
	    }
	  }
	  
	  // 确认密码验证（未修改）
	  function validateConfirmPassword() {
	    const password = passwordInput.value.trim();
	    const confirmPassword = confirmPasswordInput.value.trim();
	    
	    if (!confirmPassword) {
	      confirmPasswordError.classList.add('active');
	      confirmPasswordSuccess.classList.remove('active');
	      return false;
	    } else if (password !== confirmPassword) {
	      confirmPasswordError.classList.add('active');
	      confirmPasswordSuccess.classList.remove('active');
	      return false;
	    } else {
	      confirmPasswordError.classList.remove('active');
	      confirmPasswordSuccess.classList.add('active');
	      return true;
	    }
	  }
	  
	  // 作家名验证（注意：使用penName作为表单提交的name，但验证仍通过ID获取值）
	  function validateWriterName() {
	    const writerName = writerNameInput.value.trim();
	    
	    if (!writerName) {
	      writerNameError.classList.add('active');
	      writerNameSuccess.classList.remove('active');
	      return false;
	    } else {
	      writerNameError.classList.remove('active');
	      writerNameSuccess.classList.add('active');
	      return true;
	    }
	  }
	  
	  // 头像验证（未修改）
	  function validateProfilePicture() {
	    if (!uploadedFile) {
	      // 没有上传文件，不显示错误
	      profileError.classList.remove('active');
	      profileSuccess.classList.remove('active');
	      return true; // 不上传头像也可以
	    }
	    
	    const fileType = uploadedFile.type;
	    const fileSize = uploadedFile.size;
	    
	    // 检查文件类型
	    if (!fileType.match(/image\/jpeg|image\/png/)) {
	      profileError.textContent = '请上传JPG或PNG格式的图片';
	      profileError.classList.add('active');
	      profileSuccess.classList.remove('active');
	      return false;
	    }
	    
	    // 检查文件大小 (5MB = 5*1024*1024 bytes)
	    if (fileSize > 5242880) {
	      profileError.textContent = '图片大小不能超过5MB';
	      profileError.classList.add('active');
	      profileSuccess.classList.remove('active');
	      return false;
	    }
	    
	    // 验证通过
	    profileError.classList.remove('active');
	    profileSuccess.classList.add('active');
	    return true;
	  }
	  
	  // 头像上传功能（未修改）
	  uploadBtn.addEventListener('click', function() {
	    profileInput.click();
	  });
	  
	  profileInput.addEventListener('change', function() {
	    if (this.files && this.files[0]) {
	      uploadedFile = this.files[0];
	      validateProfilePicture();
	      
	      // 显示预览
	      const reader = new FileReader();
	      reader.onload = function(e) {
	        previewImage.src = e.target.result;
	        fileInfo.textContent = `文件名: ${uploadedFile.name}, 大小: ${(uploadedFile.size / 1024 / 1024).toFixed(2)}MB`;
	        profilePreview.classList.add('active');
	        removeBtn.style.display = 'block';
	      }
	      reader.readAsDataURL(uploadedFile);
	    }
	  });
	  
	  // 移除头像功能（未修改）
	  removeBtn.addEventListener('click', function() {
	    profileInput.value = '';
	    uploadedFile = null;
	    previewImage.src = '';
	    fileInfo.textContent = '暂无文件';
	    profilePreview.classList.remove('active');
	    removeBtn.style.display = 'none';
	    profileError.classList.remove('active');
	    profileSuccess.classList.remove('active');
	  });
	  
	  // 实时验证账号（未修改）
	  accountInput.addEventListener('blur', validateAccount);
	  accountInput.addEventListener('input', function() {
	    accountError.classList.remove('active');
	    accountSuccess.classList.remove('active');
	  });
	  
	  // 实时验证密码（未修改）
	  passwordInput.addEventListener('blur', validatePassword);
	  passwordInput.addEventListener('input', function() {
	    passwordError.classList.remove('active');
	    passwordSuccess.classList.remove('active');
	    if (this.value) checkPasswordStrength(this.value);
	  });
	  
	  // 实时验证确认密码（未修改）
	  confirmPasswordInput.addEventListener('blur', validateConfirmPassword);
	  confirmPasswordInput.addEventListener('input', function() {
	    confirmPasswordError.classList.remove('active');
	    confirmPasswordSuccess.classList.remove('active');
	  });
	  
	  // 实时验证作家名（未修改，仍通过ID获取值）
	  writerNameInput.addEventListener('blur', validateWriterName);
	  writerNameInput.addEventListener('input', function() {
	    writerNameError.classList.remove('active');
	    writerNameSuccess.classList.remove('active');
	  });
	  
	  // 实时验证头像（未修改）
	  profileInput.addEventListener('change', validateProfilePicture);
	  
	  // 表单验证逻辑（未修改，作家名通过name="penName"提交，但JS中无需处理name，只需确保值正确）
	  form.addEventListener('submit', function(e) {
	    e.preventDefault();
	    
	    let isValid = true;
	    
	    // 验证账号
	    if (!validateAccount()) {
	      isValid = false;
	    }
	    
	    // 验证密码
	    if (!validatePassword()) {
	      isValid = false;
	    }
	    
	    // 验证确认密码
	    if (!validateConfirmPassword()) {
	      isValid = false;
	    }
	    
	    // 验证作家名
	    if (!validateWriterName()) {
	      isValid = false;
	    }
	    
	    // 验证头像（如果有上传）
	    if (uploadedFile && !validateProfilePicture()) {
	      isValid = false;
	    }
	    
	    // 如果验证通过，这里可以添加提交表单的逻辑
	    if (isValid) {
	      // 获取选中的性别
	      const selectedGender = document.querySelector('input[name="writer-gender"]:checked').value;
	      
	      let profileMsg = '未上传头像';
	      if (uploadedFile) {
	        profileMsg = `已上传头像: ${uploadedFile.name}`;
	      }
	      
	      // 提交表单到regWriter.do
	      form.submit();
	    }
	  });
	  
	});
  </script>
</body>
</html>